<script setup>
import { Modal, message } from 'ant-design-vue';
import { onMounted, ref, reactive, markRaw , onUnmounted} from 'vue';
import { orderlist ,editorderstatus, deleteorder} from '@/common/http.api.js'
import tlTable from '@/components/Table/tlTable.vue'
import { confirmDelete } from '@/utils/modalcomfir.js'
import { formatDateTime } from '@/utils/formattime.js'
import Orders from './orders.vue'

// let timer = setInterval(() => {
//   isRefrensh.value ++
// }, 3000);

// onUnmounted(()=>{
//   if(timer) clearInterval(timer)
// })

// 删除订单
const deleteOrder = async (row) =>{
  if(row.status == '0') return message.error('不允许删除未完成的订单！')
  let id = row.id
  confirmDelete('删除订单', '确定要删除此订单吗？', async () => {
    await deleteorder({ id })
    message.success('删除成功')
    isRefrensh.value++
  })
} 

//完成订单
const editAppealstatus = async (id,status)=>{
  let data = {
    id,
    status
  }
  confirmDelete('修改订单状态', '确定此订单完成了吗？', async () => {
      await editorderstatus(data)
      message.success('已完成订单')
      isRefrensh.value++
    })
}

//商品详情
const rowData = reactive({ data: {} });
const currentComponent = reactive({});

const showContent = (row) => {
  console.log('o');
  rowData.data = row.goodsInfo
  currentComponent.comName = componentList[0].comName;
}
const componentList = reactive([
  {
    name: "Orders",
    comName: markRaw(Orders),
  },
]); //组件可以有多个

const closeModal = (mark) => {
  currentComponent.comName = null; // 清空
  if (mark > 0) isRefrensh.value++; // 刷新表格
}

// 表格
const isRefrensh = ref(0);
const pageData = reactive({ page: 1, limit: 5 });
const searchData = ref([
  {
    label: "姓名:",
    prop: "uname",
    type: "input-complete",
    options: [],
    value: "",
  },
  {
    label: "配送方式:",
    prop: "way",
    type: "select",
    value: "",
    options: [{
      label : '送货上门',
      value : '送货上门'
    },
    {
      label : '自行取件',
      value : '自行取件'
    },
    {
      label : '全部',
      value : ''
    }],
  },
  {
    label: "订单状态:",
    prop: "status",
    type: "select",
    value: "",
    options: [{
      label : '待完成',
      value : '0'
    },
    {
      label : '已完成',
      value : '1'
    },
    {
      label : '全部',
      value : ''
    }],
  },
  {
    type: "clear-btn",
    style:{top :"25px"}
  },
  {
    type: "search-btn",
  },
]);

const columns = ref([
  {
    title: "序号",
    width: "10%",
    customRender: (v) => {
      return <div>{`${v.index + 1}`}</div>;
    },
  },
  {
    title: "姓名",
    dataIndex: "uname",
    key: "uname",
  },
  {
    title: "电话",
    dataIndex: "phone",
    key: "phone",
    align :'center'
  },
  {
    title: "住址",
    dataIndex: "home",
    key: "home",
  },
  // {
  //   title: "配送商品",
  //   dataIndex: "goodsInfo",
  //   key: "goodsInfo",
  // },
  {
    title: "总金额",
    dataIndex: "total",
    key: "total",
    width:'5%',
    align: "right",
    renderDom : (h,row) => <div>{'￥'+ row.total }</div>
  },  
  {
    title: "配送方式",
    dataIndex: "way",
    key: "way",
    align : 'center'
  },
  {
    title: "预约时间",
    dataIndex: "appoi_time",
    key: "appoi_time",
    align : 'center',
    renderDom : (h,row) => <div>{formatDateTime(row.appoi_time)}</div>
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    align : 'center',
    renderDom : (h,row)=>{
      let dom = <a-button type="link" >已完成</a-button>
      if(row.status == '0'){
        dom = <a-button type="link" danger>待完成</a-button>
      }
      return dom
    }
  },
  {
    title: "操作",
    align : 'center',
    width:'16%',
    renderDom : (h,row)=>{
      return <div>
            <a-button
              type="link"
              size="small"
              onClick={() => {
                showContent(row)
              }}
            >
              商品列表
            </a-button>
            <a-button
              disabled={row.status == '0'? false : true}
              type="link"
              size="small"
              onClick={() => {
                editAppealstatus(row.id, '1')
              }}
            >
              完成订单
            </a-button>
            <a-button
              type="link"
              size="small"
              onClick={() => {
                deleteOrder(row)
              }}
            >
              删除
            </a-button>
          </div>
    }
  }
]);
</script>

<template>
  <div>
    <div><tl-table :columns="columns" :pageData="pageData" :searchData="searchData" :isRefrensh="isRefrensh"
        :renderTable="orderlist">
        <template v-slot:title>订单列表</template>
      </tl-table>
    </div>
    <component :row="rowData" :is="currentComponent.comName" @on-close="closeModal"></component>
  </div>
</template>

